<template>
	<view class="address">
		<view class="copyApplayPadding">
			<view class="header">
				<u-steps :current="current">
					<u-steps-item title="完善信息" >
					</u-steps-item>
					<u-steps-item title="填写地址" ></u-steps-item>
					<u-steps-item title="支付订单" ></u-steps-item>
				</u-steps>
				<u-divider ></u-divider>
			</view>
			
			<view class="chooseAddress">
				<view class="content">
					<u--form
						labelPosition="left"
						:model="FormData"
						ref="uForm"
						:rules="rules"
						labelWidth='100'
						:labelStyle="labelStyle"
						>
						<u-form-item
							label="收件地址"
							borderBottom
							ref="item1"
							@click="chooseAddress"
							style="margin-bottom: 10px;"
							>
							<u--input
								border="none"
								disabled
								disabledColor=""
								:placeholder="chooseAddressPlace"
								clearable
								></u--input>
							<u-icon
									slot="right"
									name="arrow-right"
							></u-icon>
						</u-form-item>
						<u-form-item
							label="收件人姓名"
							prop="receiveUser"
							borderBottom
							style="margin-bottom: 10px;"
							ref="item1">
							<u--input
								placeholder="请填写收件人姓名"
								v-model="FormData.receiveUser"
								border="none"
								clearable
								></u--input>
						</u-form-item>	
						<u-form-item
							label="联系电话"
							prop="receivePhone"
							borderBottom
							style="margin-bottom: 10px;"
							ref="item1">
							<u--input
								placeholder="请填写收件人联系电话"
								v-model="FormData.receivePhone"
								border="none"></u--input>
						</u-form-item>
						
						<u-form-item
							label="省市区"
							prop="adressMsg"
							borderBottom
							@click="adressMsgevent"
							style="margin-bottom: 10px;"
							ref="item1">
							<u--input
								v-model="FormData.adressMsg"
								border="none"  disabled  disabledColor="#ffffff" placeholder="请选择">
							</u--input>
							<u-icon
								slot="right"
								name="arrow-right"
							></u-icon>
						</u-form-item>
						
						
						<u-popup :show="showbox" @close="close" @open="open">
						    <view>
								<semp-city @confirm="onCityConfirm" platform="jd"></semp-city>
						    </view>
						</u-popup>
						
						<u-form-item
							label="详细地址"
							prop="receiveAddr"
							borderBottom
							style="margin-bottom: 10px;"
							ref="item1">
							<u--textarea
								v-model="FormData.receiveAddr"
								placeholder="请填写收件人详细地址"
								></u--textarea>
						</u-form-item>
						
						
					</u--form>
					
				</view>
			</view>
		</view>
		<view class="submitBtn">
			<view class="btnBoxW" style="width: 90%;">
				<u-button :customStyle='btnStyle'  type="primary" @click="copyBtn"  shape='circle' text="提交申请"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		saveApply,
		getAddressDetails,
		getApplyDetails
	}from '@/api/index.js'
	export default{
		data(){
			return{
				id:'',
				showbox:false,
				chooseAddressPlace:'请选择收货地址',
				current:1,
				labelStyle:{
					fontWeight:'bold',
					fontSize:'15px'
				},
				
				btnStyle:{
					fontSize:'16px',
					fontWeight:'bold',
					height:'45px'
				},
				FormData:{
					id:'',
					receiveUser:'',
					receivePhone:'',
					receiveProvince:'',
					receiveProvinceId:'',
					receiveCity:'',
					receiveCityId:'',
					receiveDistrict:'',
					receiveDistrictId:'',
					receiveStreet:'',
					receiveStreetId:'',
					adressMsg:'',
					receiveAddr:'',
					status:"1"
				},
				rules: {
					'receiveUser': {
						type: 'string',
						required: true,
						message: '请填写收件人姓名',
						trigger: ['blur', 'change']
					},
					'receivePhone': [
						{
							type: 'string',
							required: true,
							message: '请填写收件人联系电话',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					'adressMsg': {
						type: 'string',
						required: true,
						message: '请选择省市区',
						trigger: ['blur', 'change']
					},
					'receiveAddr': {
						type: 'string',
						required: true,
						message: '请填写详细住址',
						trigger: ['blur', 'change']
					},
					
				},
			}
		},
		onLoad(options) {
			if(options && options.id){
				uni.setStorageSync('orderID',options.id);
			}
			const orderID = uni.getStorageSync('orderID') || options.id;
			this.id = orderID;
			if(options && options.addressId){
				this.FormData.id = options.addressId;
			}
			console.log(this.FormData.id,"this.FormData.id",options,this.id);
		},
		onShow() {
			if(this.FormData.id){
				this.addressDetails()
			}else {
				this.orderDetails(this.id)
			}
			
			
			
		},
		methods:{
			addressDetails(){
				uni.showLoading({
					title:'加载中...'
				})
				getAddressDetails(this.FormData.id).then(res=>{
					uni.hideLoading()
					const data = res.retData;
					this.FormData = res.retData;
					this.FormData.adressMsg = `${data.receiveProvince} ${data.receiveCity} ${data.receiveDistrict} ${data.receiveStreet}`;
					this.chooseAddressPlace = "已选择收货地址"
					console.log(res,"======");
				})
			},
			
			orderDetails(ID){
				uni.showLoading({
					title:'加载中...'
				})
				getApplyDetails(ID).then(res=>{
					uni.hideLoading()
					const Data = res.retData;
					const formData = this.FormData;
					for(let key in Data){
						if(formData.hasOwnProperty(key)){
							formData[key] = Data[key]
						}
					}
					this.FormData = formData;
					const receiveProvince = Data.receiveProvince??'';
					const receiveCity = Data.receiveCity??'';
					const receiveDistrict = Data.receiveDistrict??'';
					const receiveStreet = Data.receiveStreet??'';
					const receiveAddr = Data.receiveAddr??'';
		
					this.FormData.adressMsg = receiveProvince+receiveCity+receiveDistrict+receiveStreet+receiveAddr;
					this.receiveUser = Data.receiveUser??'';
					
				})
					
			},
			
			
			open(){
				this.showbox=true;
			
			},
			adressMsgevent(){
				this.showbox=true;
			},
			close(){
				this.showbox=false;
			},
			/* 选择地址 */
			onCityConfirm(e){
				this.showbox=false;
				this.FormData.receiveProvince = e.province.label;
				this.FormData.receiveProvinceId = e.province.value;
				this.FormData.receiveCity = e.city.label;
				this.FormData.receiveCityId = e.city.value;
				this.FormData.receiveDistrict = e.county.label;
				this.FormData.receiveDistrictId = e.county.value;
				this.FormData.receiveStreet = e.town.label;
				this.FormData.receiveStreetId = e.town.value;
				this.FormData.adressMsg = e.province.label+ e.city.label+e.county.label+e.town.label;
				console.log(this.FormData.adressMsg,"=====");
			},
			
			chooseAddress(){
				
				uni.navigateTo({
					url:'/pages/chooseAddress/chooseAddress'
				})
			},
			copyBtn(){
				this.$refs.uForm.validate().then(res => {
					this.FormData.id = this.id;
					this.FormData.status = "1";
					console.log(this.FormData,"=====");
					uni.showLoading({
						title:'加载中...'
					})
					saveApply(this.FormData).then(res=>{
						uni.hideLoading()
						if(res.retCode == "SUCCESS"){
							uni.showToast({
								title:"提交成功!",
								icon:'none'
							})
							uni.navigateTo({
								url:'/pages/await/await'
							})
						}else{
							uni.showToast({
								title:res.retMsg,
								icon:'none'
							})
						}
					})
				}).catch(errors => {
					
					uni.$u.toast('请填写完整!')
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.copyApplayPadding{
		padding: 20upx;
		padding-bottom: 120upx;
		box-sizing: border-box;
	}
	::v-deep .u-form-item__body__right__message[data-v-03e1ba13]{
		font-size: 30upx !important;
	}
	
</style>